<template>
  <div v-if="showCheck" class="version-check">
    <mu-alert color="info">
      <mu-icon left value="warning"></mu-icon>
      <span>系统有新版本：{{ version.lastest.text }}，请刷新以自动升级。</span>
    </mu-alert>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'VersionCheck',
  computed: {
    ...mapGetters({
      version: 'version'
    }),
    mustUpdate() {
      return this.version.current.code < this.version.min.code
    },
    needUpdate() {
      return this.version.current.code < this.version.lastest.code
    },
    isLogin() {
      return this.$route.name === 'login-page'
    },
    showCheck() {
      return this.needUpdate && !this.isLogin
    }
  },
  created() {
    if (!this.isLogin && this.mustUpdate) {
      this.$router.push({ name: 'login-page' })
    }
  }
}
</script>

<style scoped>
.version-check {
  position: fixed;
  width: 500px;
  margin: auto;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 1024;
}

.is-phone .version-check {
  width: 300px;
}
</style>
